/**
 * LeoSmart App
 */

// 首先导入Reactotron配置 - 在任何应用代码之前导入
import './src/utils/ReactotronConfig';
// 导入Reactotron的axios配置
import './src/utils/ReactotronAxiosConfig';

import React, {
  createContext,
  useEffect,
  useLayoutEffect,
  useState,
} from 'react';
import {Provider as ReduxProvider} from 'react-redux';
import {GestureHandlerRootView} from 'react-native-gesture-handler';
import './global.css';
// App specific imports
import store from './src/store';
import AppNavigator from './src/routes';
import './src/i18n';
import '@/utils/polyfill';
import {ThemeProvider, setDefaultGlyphs, TextInput} from 'tsun-smart-ui';
import FastImage from 'react-native-fast-image';
import {cssInterop} from 'nativewind';
import ShimmerPlaceholder from 'react-native-shimmer-placeholder';
import {useGetTheme} from '@/hooks/useTheme';
import {UITheme} from '@/theme';
import {
  BottomSheetModal,
  BottomSheetView,
  BottomSheetModalProvider,
} from '@gorhom/bottom-sheet';
import {Appearance, View} from 'react-native';
import {init} from 'react-native-amap-geolocation';
import {AMAP_ANDROID_KEY, AMAP_IOS_KEY} from '@/config/config';
import {KeyboardProvider} from 'react-native-keyboard-controller';
import PagerView from 'react-native-pager-view';
import IconMap from '@/assets/fonts/icon-mapping.json';
import Orientation from 'react-native-orientation-locker';
import {QueryClient, QueryClientProvider} from '@tanstack/react-query';
import TailwindThemedView from '@/components/TailwindThemedView';
setDefaultGlyphs(IconMap);
// Reactotron类型声明扩展
cssInterop(FastImage, {
  className: 'style',
});
cssInterop(ShimmerPlaceholder, {
  className: 'style',
});
cssInterop(PagerView, {
  className: 'style',
});
TextInput.prototype.defaultProps.rounded = false;
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      retry: 0, // 失败后重试 1 次
      refetchOnWindowFocus: false, // 切换窗口时不自动刷新
      staleTime: 1000 * 60, // 1分钟内数据视为新鲜
    },
  },
});

export const AppProperties = createContext({
  onAnimationComplete: false,
});
const {light: lightTheme, dark: darkTheme} = UITheme;
// Wrapped App component with theme support
const ThemedApp = () => {
  const themeScheme = useGetTheme();
  // Select the appropriate theme based on dark mode setting
  const [theme, setTheme] = useState<typeof darkTheme | typeof lightTheme>();
  useLayoutEffect(() => {
    setTheme(themeScheme === 'dark' ? darkTheme : lightTheme);
    Appearance.setColorScheme(themeScheme);
  }, [themeScheme]);
  useEffect(() => {
    Orientation.lockToPortrait();
  }, []);
  useEffect(() => {
    init({
      ios: AMAP_IOS_KEY,
      android: AMAP_ANDROID_KEY,
    });
  }, []);

  return (
    <ThemeProvider theme={theme}>
      <KeyboardProvider statusBarTranslucent navigationBarTranslucent>
        <GestureHandlerRootView style={{flex: 1}}>
          <TailwindThemedView className="flex-1">
            <BottomSheetModalProvider>
              <QueryClientProvider client={queryClient}>
                <AppNavigator />
              </QueryClientProvider>
            </BottomSheetModalProvider>
          </TailwindThemedView>
        </GestureHandlerRootView>
      </KeyboardProvider>
    </ThemeProvider>
  );
};

// Root App component with Redux Provider
function App(props: {onAnimationComplete: boolean}): React.JSX.Element {
  return (
    <AppProperties
      value={{
        onAnimationComplete: props.onAnimationComplete,
      }}>
      <ReduxProvider store={store}>
        <ThemedApp />
      </ReduxProvider>
    </AppProperties>
  );
}

export default App;
